|
1
|
|
|
/* |
|
2
|
|
|
* Copyright (C) 2021 Joe Nilson <[email protected]> |
|
3
|
|
|
* |
|
4
|
|
|
* This program is free software: you can redistribute it and/or modify |
|
5
|
|
|
* it under the terms of the GNU Lesser General Public License as |
|
6
|
|
|
* published by the Free Software Foundation, either version 3 of the |
|
7
|
|
|
* License, or (at your option) any later version. |
|
8
|
|
|
* |
|
9
|
|
|
* This program is distributed in the hope that it will be useful, |
|
10
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
11
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
12
|
|
|
* GNU Lesser General Public License for more details. |
|
13
|
|
|
* You should have received a copy of the GNU Lesser General Public License |
|
14
|
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
15
|
|
|
*/ |
|
16
|
|
|
|
|
17
|
|
|
/** |
|
18
|
|
|
* Modal Creation Functions |
|
19
|
|
|
* Code based on the gist https://gist.github.com/signalpoint/e6dda6b6220a157edbd170f3d2a6250e |
|
20
|
|
|
*/ |
|
21
|
|
|
|
|
22
|
|
|
/** |
|
23
|
|
|
* @param {string} modalId |
|
24
|
|
|
* @param {string} title |
|
25
|
|
|
* @param {string} content |
|
26
|
|
|
* @param {string} contentType |
|
27
|
|
|
*/ |
|
28
|
|
|
function executeModal(modalId, title, content, contentType = 'default', saveButtonCallback = '') |
|
29
|
|
|
{ |
|
30
|
|
|
//Set the modal ID |
|
31
|
|
|
let actualModal = getModal(modalId); |
|
32
|
|
|
|
|
33
|
|
|
// Init the modal if it hasn't been already. |
|
34
|
|
|
actualModal = (!actualModal) ? initModal(modalId) : actualModal; |
|
35
|
|
|
|
|
36
|
|
|
//Set the modal content based on the type |
|
37
|
|
|
content = setModalContentType(contentType, content); |
|
38
|
|
|
|
|
39
|
|
|
//Choose the buttons to show based on the contentType |
|
40
|
|
|
let buttons = setModalButtons(contentType, saveButtonCallback); |
|
41
|
|
|
|
|
42
|
|
|
//Assemble all the pieces in the final modal html body |
|
43
|
|
|
let html = setModalHtml(modalId, title, content, buttons); |
|
44
|
|
|
|
|
45
|
|
|
//Put the modal content in the modal |
|
46
|
|
|
setModalContent(modalId, html); |
|
47
|
|
|
|
|
48
|
|
|
//Show the modal |
|
49
|
|
|
$(actualModal).modal('show'); |
|
50
|
|
|
} |
|
51
|
|
|
|
|
52
|
|
|
/** |
|
53
|
|
|
* @returns {HTMLElement} |
|
54
|
|
|
* @param {string} modalId |
|
55
|
|
|
*/ |
|
56
|
|
|
function getModal(modalId) |
|
57
|
|
|
{ |
|
58
|
|
|
return document.getElementById(modalId); |
|
59
|
|
|
} |
|
60
|
|
|
|
|
61
|
|
|
/** |
|
62
|
|
|
* @param {string} contentType |
|
63
|
|
|
* @param {string} content |
|
64
|
|
|
* @returns {string} |
|
65
|
|
|
*/ |
|
66
|
|
|
function setModalContentType(contentType, content) |
|
67
|
|
|
{ |
|
68
|
|
|
if (contentType == 'default') { |
|
69
|
|
|
return content; |
|
70
|
|
|
} else { |
|
|
|
|
|
|
71
|
|
|
return '<div className="alert alert-' + contentType + '" role="alert"> ' + content + '</div>'; |
|
72
|
|
|
} |
|
73
|
|
|
} |
|
74
|
|
|
|
|
75
|
|
|
/** |
|
76
|
|
|
* @param {string} modalId |
|
77
|
|
|
* @param {string} html |
|
78
|
|
|
*/ |
|
79
|
|
|
function setModalContent(modalId, html) |
|
80
|
|
|
{ |
|
81
|
|
|
getModal(modalId).querySelector('.modal-content').innerHTML = html; |
|
82
|
|
|
} |
|
83
|
|
|
|
|
84
|
|
|
/** |
|
85
|
|
|
* @param {string} modalId |
|
86
|
|
|
* @param {string} title |
|
87
|
|
|
* @param {string} content |
|
88
|
|
|
* @param {string} buttons |
|
89
|
|
|
* @returns {string} |
|
90
|
|
|
*/ |
|
91
|
|
|
function setModalHtml(modalId, title, content, buttons) |
|
92
|
|
|
{ |
|
93
|
|
|
var html = |
|
94
|
|
|
'<div class="modal-header">' + |
|
95
|
|
|
'<h5 class="modal-title" id="'+modalId+'-ModalLabel">'+title+'</h5>' + |
|
96
|
|
|
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' + |
|
97
|
|
|
'<span aria-hidden="true">×</span>' + |
|
98
|
|
|
'</button>' + |
|
99
|
|
|
'</div>' + |
|
100
|
|
|
'<div class="modal-body">' + |
|
101
|
|
|
content + |
|
102
|
|
|
'</div>' + |
|
103
|
|
|
'<div class="modal-footer">' + |
|
104
|
|
|
buttons + |
|
105
|
|
|
'</div>'; |
|
106
|
|
|
return html; |
|
107
|
|
|
} |
|
108
|
|
|
|
|
109
|
|
|
/** |
|
110
|
|
|
* @param {string} contentType |
|
111
|
|
|
* @param {string} saveButtonCallback |
|
112
|
|
|
* @returns {string} {string} |
|
113
|
|
|
*/ |
|
114
|
|
|
function setModalButtons(contentType, saveButtonCallback) |
|
115
|
|
|
{ |
|
116
|
|
|
const onClick = (saveButtonCallback) ? ' onClick=' + saveButtonCallback + '(this)' : ''; |
|
117
|
|
|
const cancelButton = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>'; |
|
118
|
|
|
const warningButton = '<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>'; |
|
119
|
|
|
const saveButton = '<button type="button" class="btn btn-primary"'+onClick+'>Guardar</button>'; |
|
120
|
|
|
|
|
121
|
|
|
let buttons = (contentType == 'warning') ? warningButton : cancelButton + saveButton; |
|
122
|
|
|
|
|
123
|
|
|
return buttons; |
|
124
|
|
|
} |
|
125
|
|
|
|
|
126
|
|
|
/** |
|
127
|
|
|
|
|
128
|
|
|
* @param {string} modalId |
|
129
|
|
|
* @returns {HTMLDivElement} |
|
130
|
|
|
*/ |
|
131
|
|
|
function initModal(modalId) |
|
132
|
|
|
{ |
|
133
|
|
|
let modal = document.createElement('div'); |
|
134
|
|
|
modal.classList.add('modal', 'fade'); |
|
135
|
|
|
modal.setAttribute('id', modalId); |
|
136
|
|
|
modal.setAttribute('tabindex', '-1'); |
|
137
|
|
|
modal.setAttribute('role', 'dialog'); |
|
138
|
|
|
modal.setAttribute('aria-labelledby', modalId+'-ModalLabel'); |
|
139
|
|
|
modal.setAttribute('aria-hidden', 'true'); |
|
140
|
|
|
modal.innerHTML = |
|
141
|
|
|
'<div class="modal-dialog" role="document">' + |
|
142
|
|
|
'<div class="modal-content"></div>' + |
|
143
|
|
|
'</div>'; |
|
144
|
|
|
document.body.appendChild(modal); |
|
145
|
|
|
return modal; |
|
146
|
|
|
} |
joenilson /
fsRepublicaDominicana
Loading history...